<template>
  <div>
    <van-nav-bar
      title="详情"
      left-text="返回"
      left-arrow
      @click-right="gengd"
      @click-left="onClickLeft"
    >
      <template #right>
        <van-popover
          v-model="showPopover"
          theme="dark"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="weapp-nav" size="18" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <!-- 分享 -->
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <div>
      <div @click="showimg">
        <van-swipe :autoplay="2000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <img :src="image"  />
          </van-swipe-item>
        </van-swipe>
      </div>
      <p class="p1">￥{{ list.originprice }}</p>
      <p>{{ list.proname }}</p>
    </div>
    <!-- 气泡弹出框 -->
    <van-action-bar>
      <van-action-bar-icon icon="cart-o" text="购物车" :badge="goddslength" />
      <van-action-bar-button type="warning" text="加入购物车" @click="addcar" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script>
import { showImagePreview } from "vant";
import { showToast } from "vant";
import { getdetail, setaddcar, getgoodslist } from "../../service/user";
export default {
  data() {
    return {
      goddslength: "",
      images: [],
      list: [],
      showPopover: false,
      showShare: false,
      //气泡弹出框的值
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "购物车", icon: "cart-o" },
        { text: "分享", icon: "share-o" },
      ],
      //分享选项
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      showImagePreview: [],
    };
  },
  created() {
    this.getdel();
    this.getdgoodslist();
  },
  methods: {
    //轮播图
    getdel() {
      getdetail(this.$route.params.proid).then((res) => {
        if ((res.data.code = "200")) {
          this.images = [
            res.data.data.img1,
            res.data.data.img2,
            res.data.data.img3,
            res.data.data.img4,
          ];
          this.list = res.data.data;
        }
        console.log(res);
      });
    },
    onClickLeft() {
      history.back();
    },
    gengd() {
      this.showPopover = !this.showPopover;
    },
    //路由跳转
    onSelect(action) {
      showToast(action.text);
      if (action.text === "分享") {
        this.showShare = true;
      } else if (action.text === "首页") {
        this.$router.push("/home");
      } else {
        this.$router.push("/login");
      }
    },
    //添加购物车
    //如果没有登陆需要先跳转登录页
    addcar() {
      if (localStorage.getItem("token")) {
        setaddcar({
          userid: this.$store.state.userInfo.data.userid,
          proid: this.$route.params.proid,
          num: 1,
        }).then((res) => {
          if (res.data.code === "200") {
            showToast({
              message: "成功添加购物车",
              icon: "success",
            });
            this.getdgoodslist();
          }
        });
      }else{
        showToast({
              message: "请先登录",
              icon: "cross",
            });
          this.$router.push("/login")
      }
    },
    //获取购物车数据
    //显示购物车数量
    getdgoodslist() {
      if (localStorage.getItem("token")) {
        getgoodslist({ userid: this.$store.state.userInfo.data.userid }).then(
          (res) => {
            if (res.data.code === "200") {
              this.goddslength = res.data.data.length;
            }
          }
        );
      } else {
        this.goddslength = "";
      }
    },
    //图片预览
    showimg() {
      showImagePreview({
        images: this.images,
        closeable: true,
        showIndex: true,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100%;
}
p {
  font-size: 18px;
  font-weight: 900;
}
.p1 {
  font-size: 16px;
  margin: 10px 20px;
  font-weight: 700;
  color: red;
}
</style>
